<template>
    <div class="home">
        <fieldset>
            <legend>数据类型</legend>
            <div>
                <p @click="fun1">布尔值boolean：{{ aaa }}</p>
                <p @click="fun2">数字number：{{ bbb }}</p>
                <p @click="fun3">字符串string：{{ ccc }}</p>
            </div>
        </fieldset>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from "vue";
export default defineComponent({
    setup() {
        interface data_type {
            aaa: boolean;
            bbb: {
                a1: number;
                a2: number;
                a3: number;
                a4: number;
            };
            ccc: any;
        }
        let data1: data_type = {
            aaa: false,
            bbb: {
                a1: 10, // 十进制
                a2: 0b1010, // 二进制0b****
                a3: 0o12, // 八进制0o****
                a4: 0xa, // 十六进制0x****
            },
            ccc: "你大爷",
        };
        let data = toRefs(reactive(data1));
        console.log(data.aaa);
        let methods = {
            fun1: () => {
                data.aaa.value = !data.aaa.value;
                console.log(data.aaa.value);
            },
            fun2: () => {
                data.bbb.value.a1 += 1;
            },
            fun3: () => {
                data.ccc.value += 1;
            },
        };

        // 数组
        // 数组定义方式1：let key: 数据类型[] = [ 值1，值2，值3 ]
        console.log("数组----------------------------------");
        let arr1: number[] = [1, 2, 3];
        console.log(arr1);

        // 数组定义方式 2 泛型：let key: Array<数据类型> = [ 值1，值2，值3 ]
        let arr2: Array<any> = ["你大爷", "你大爷", 11111];
        console.log(arr2);

        // 枚举，枚举里每个数据值都可以叫叫元素，都有自己的编号，从 0 开始
        console.log("枚举---------------------------------------");
        enum enum1 {
            你大爷 = 10,
            bbb,
            ccc,
        }
        console.log(enum1);
        console.log(enum1.你大爷, enum1.bbb, enum1.ccc);
        console.log(enum1[10], enum1[11], enum1.ccc);

        // any 任何类型
        console.log("any--------------------------------------");
        let any1: any = "你大爷还是你大爷";
        any1 = 11111;

        // void
        console.log("void:函数没有任何返回值-----------------------");
        function void1(): void {
            let a = 1;
        }
        console.log(void1());

        // object
        console.log("object-----------------------------------");
        function obj1(obj: object): object {
            return {
                name: "你大爷牛逼",
                job: "前端牛逼",
            };
        }
        console.log([1, 2, 3]);

        // end
        return {
            ...data,
            ...methods,
        };
    },
});
</script>
<style lang="scss" scoped>
p {
    cursor: pointer;
}
</style>
